<!--
 * @Descripttion:滁州数据大屏首页
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-09-05 15:05:40
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-03-18 13:36:55
-->
<template>
  <div class="content">
    <el-row :gutter="10" class="screen">
      <el-col :span="7" class="elcol">
        <div class="left drawbg" style="margin-bottom: 10px">
          <div class="title">工资实时数据</div>
          <div id="bigScreenHomehighrate" class="chartbg"></div>
        </div>
        <div class="left drawbg">
          <!-- <div class="title">在线业务审批</div> -->
          <div id="bigScreenHomecomplaint" class="chartbg"></div>
        </div>
      </el-col>
      <el-col :span="10" class="elcol">
        <div
          class="left drawbg middleTop"
          style="margin-bottom: 10px; position: relative"
        >
          <div class="title">实名制统计</div>
          <div class="fr areaBox">
            <el-select
              v-model="areaValue"
              placeholder="请选择"
              @change="selectChanged"
            >
              <el-option
                v-for="item in areas"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div
            id="bigScreenHomerealNameStatistics"
            class="chartbg"
            style="clear: both"
          ></div>
          <div style="position: absolute; top: 50px; left: 25px">
            <ul class="pro-info">
              <li @click="proSumNumBtn" class="proInfoLi">
                <p>项目总数</p>
                <h4>{{ homepageempDate.proSumNum }}</h4>
              </li>
              <li @click="companyNumBtn">
                <p>参建单位</p>
                <h4>{{ homepageempDate.companyNum }}</h4>
              </li>
              <li @click="empNumBtn">
                <p>务工人员</p>
                <h4>{{ homepageempDate.empNum }}</h4>
              </li>
              <li @click="empRateBtn(homepageempDate.empNum)">
                <p>实名制覆盖率(%)</p>
                <h4>{{ homepageempDate.empRate }}</h4>
              </li>
            </ul>
          </div>
        </div>
        <div class="left drawbg middleBottom">
          <p class="fontColor comFontSize TitleStyle title">
            保证金数据
            <span class="titleTip"
              >保证金总额:{{ homepagedepositDate.depositSumTotal }}万</span
            >
          </p>
          <div class="fr realNameBox">
            <el-date-picker
              v-model="yearSelected"
              type="year"
              placeholder="选择年"
              @change="realNameChange"
              format="yyyy"
              value-format="yyyy"
            ></el-date-picker>
          </div>
          <div id="bigScreenHomemarginData" class="chartbg"></div>
        </div>
      </el-col>
      <el-col :span="7" class="elcol">
        <div class="left drawbg" style="margin-bottom: 10px">
          <div class="title">预警中心</div>
          <div id="bigScreenHomewarningCenter" class="chartbg"></div>
        </div>
        <div class="left drawbg">
          <div class="title">诚信管理</div>
          <div id="bigScreenHomeintegrityManagement" class="chartbg"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
// import '../../../static/js/echarts/echarts.js'

import {
  drawFemaleRatio,
  drawLineArea,
  drawTipCenter,
  drawIntegrityManagement,
  drawMap,
  drawTj,
} from './bigScreenHome/bigScreenHome'
export default {
  name: 'bigScreenHome',
  data() {
    return {
      yearSelected: '',
      areas: [
        {
          value: '3411',
          label: '滁州市',
        },
        {
          value: '341101',
          label: '市辖区',
        },
        {
          value: '341171',
          label: '苏滁现代产业园',
        },
        {
          value: '341172',
          label: '滁州经济技术开发区',
        },
        {
          value: '341182',
          label: '明光市',
        },
        {
          value: '341126',
          label: '凤阳县',
        },
        {
          value: '341181',
          label: '天长市',
        },
        {
          value: '341125',
          label: '定远县',
        },
        {
          value: '341122',
          label: '来安县',
        },
        {
          value: '341103',
          label: '南谯区',
        },
        {
          value: '341102',
          label: '琅琊区',
        },
        {
          value: '341124',
          label: '全椒县',
        },
      ],
      homepagealertDateIndex: [],
      areaValue: '3411',
      datas: [
        { name: '明光市', value: 40 },
        { name: '凤阳县', value: 60 },
        { name: '天长市', value: 25 },
        { name: '定远县', value: 24 },
        { name: '来安县', value: 41 },
        { name: '南谯区', value: 62 },
        { name: '琅琊区', value: 138 },
        { name: '全椒县', value: 42 },
      ],
      areaIdHomepageemp: '3411',
      homepageempDate: ' ',
      warningCenterDate: {},
      homepagedepositDate: {},
      findprogradeDate: {},
    }
  },
  created() {
    this.currentTime()
  },
  mounted() {
    this.getInvestmenttype()
    this.getHomepageemp()
    this.getHomepagealert()
    this.getHomepagedeposit()
    this.getFindprograde()
  },
  methods: {
    /**
     * @description:项目总数跳转到项目列表页面
     */
    proSumNumBtn() {
      const vm = this
      vm.$router.push({
        path: '/home/project/projectList',
        name: 'projectList',
        query: {
          sign: 'chuzhouBigScreen',
        },
      })
      vm.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/projectList',
        newUrl: vm.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description:点击进入参建单位列表页
     */
    companyNumBtn() {
      const vm = this
      vm.$router.push({
        path: '/home/constructEmployingUnit/constructEmployingUnitList',
        name: 'constructEmployingUnitList',
      })
      vm.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/constructEmployingUnit/constructEmployingUnitList',
        newUrl: vm.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description:点击进入花名册列表页
     */
    empNumBtn() {
      const vm = this
      vm.$router.push({
        path: '/home/employee/employeeTotalListJC',
        name: 'employeeTotalListJC',
      })
      vm.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/employeeTotalListJC',
        newUrl: vm.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description:点击进入项目明细报表
     */
    empRateBtn(empNum) {
      const vm = this
      vm.$router.push({
        path: '/home/dynamicService/projectDetailsReport',
        name: 'projectDetailsReport',
      })
      vm.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/dynamicService/projectDetailsReport',
        newUrl: vm.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description:实名制统计区域选择
     */
    selectChanged() {
      this.getHomepageemp()
    },
    /**
     * @description:获取系统当前时间
     */
    currentTime() {
      var nowDate = new Date()
      this.yearSelected = nowDate.getFullYear() + ''
    },
    /**
     * @description:工资实时数据接口
     */
    getInvestmenttype() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('bigScreenHomehighrate')
      )
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/homepagesalary',
        data: {},
      })
        .then((res) => {
          sexChart.hideLoading()
          let dataListNotEmpProMonth = 0
          if (res.data.result.notEmpProMonth < 0) {
            dataListNotEmpProMonth = 0
          } else {
            dataListNotEmpProMonth = res.data.result.notEmpProMonth
          }
          drawFemaleRatio(
            'bigScreenHomehighrate',
            res.data.result,
            dataListNotEmpProMonth
          )
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取工资实时数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:实名制统计
     */
    getHomepageemp() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('bigScreenHomerealNameStatistics')
      )
      sexChart.on('click', function (params) {
        vm.$router.push({
          path: '/home/project/projectList',
          name: 'projectList',
          query: {
            areaId: params.data.areaId,
            sign: 'chuzhouBigScreen',
          },
        })
        vm.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/project/projectList',
          newUrl: vm.$router.currentRoute.fullPath,
        })
      })
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/homepageemp',
        data: {
          areaId: vm.areaValue,
        },
      }).then((res) => {
        var data = res.data.result.dataList.concat([
          {
            accountNum: 0,
            alertTypeId: null,
            alertTypeName: null,
            areaId: '341171',
            areaName: '苏滁现代产业园',
            areaNum: 0,
            companyNum: null,
            contractNum: 0,
            contractSum: 0,
            dataList: [],
            depositAmount: null,
            depositNum: null,
            depositSumTotal: null,
            empNum: null,
            empProNum: 0,
            empProNumMonth: null,
            empRate: null,
            firstNumArray: null,
            fivthNumArray: null,
            fourthNumArray: null,
            idArray: null,
            inAlertNum: null,
            industyId: null,
            industyName: null,
            investment: null,
            month: null,
            name: null,
            nameArray: null,
            notAccountNum: null,
            notContractNum: null,
            notEmpProMonth: null,
            notSalaryMonth: null,
            proSumNum: 0,
            salaryAmount: null,
            salaryNumMonth: null,
            salaryPeople: 0,
            scoreSumTotal: 0,
            secondNumArray: null,
            sixthNumArray: null,
            thirdNumArray: null,
            unAlertNum: null,
            value: 0,
          },
          {
            accountNum: 0,
            alertTypeId: null,
            alertTypeName: null,
            areaId: '341172',
            areaName: '滁州经济技术开发区',
            areaNum: 0,
            companyNum: null,
            contractNum: 0,
            contractSum: 0,
            dataList: [],
            depositAmount: null,
            depositNum: null,
            depositSumTotal: null,
            empNum: null,
            empProNum: 0,
            empProNumMonth: null,
            empRate: null,
            firstNumArray: null,
            fivthNumArray: null,
            fourthNumArray: null,
            idArray: null,
            inAlertNum: null,
            industyId: null,
            industyName: null,
            investment: null,
            month: null,
            name: null,
            nameArray: null,
            notAccountNum: null,
            notContractNum: null,
            notEmpProMonth: null,
            notSalaryMonth: null,
            proSumNum: 0,
            salaryAmount: null,
            salaryNumMonth: null,
            salaryPeople: 0,
            scoreSumTotal: 0,
            secondNumArray: null,
            sixthNumArray: null,
            thirdNumArray: null,
            unAlertNum: null,
            value: 0,
          },
        ])
        vm.homepageempDate = res.data.result
        sexChart.hideLoading()
        let dataList = this.dataIntegration(
          { value: 'areaNum', name: 'areaName', areaId: 'areaId' },
          data
        )
        drawMap('bigScreenHomerealNameStatistics', vm.areaValue, dataList)
      })
      // .catch((error) => {
      //   // vm.$message({
      //   //   showClose: true,
      //   //   duration: 3000,
      //   //   message: "获取实名制统计数据失败",
      //   //   type: "error",
      //   // });
      // });
    },
    /**
     * @description:预警中心
     */
    getHomepagealert() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('bigScreenHomewarningCenter')
      )
      sexChart.on('click', function (params) {
        vm.$router.push({
          path: '/home/project/constructAlertProjectList',
          name: 'constructAlertProjectList',
          query: {
            alertType: vm.homepagealertDateIndex[params.dataIndex],
            ischuzhou: true,
          },
        })
        vm.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/project/constructAlertProjectList',
          newUrl: vm.$router.currentRoute.fullPath,
        })
      })
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/homepagealert',
        data: {},
      })
        .then((res) => {
          vm.warningCenterDate = res.data.result
          vm.homepagealertDateIndex = res.data.result.idArray
          sexChart.hideLoading()
          drawTipCenter('bigScreenHomewarningCenter', vm.warningCenterDate)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取预警中心数据失败",
          //   type: "error",
          // });
        })
    },
    realNameChange(value) {
      const vm = this
      vm.yearSelected = value
      vm.getHomepagedeposit()
    },
    /**
     * @description:保证金数据
     */
    getHomepagedeposit() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('bigScreenHomemarginData')
      )
      sexChart.on('click', function (params) {
        if (params.name.split('月').join('') > 9) {
          vm.$router.push({
            path: '/home/cashDeposit/cashDepositListJC',
            query: {
              operationStartTime:
                vm.yearSelected +
                '-' +
                params.name.split('月').join('') +
                '-' +
                '01',
              operationEndTime:
                vm.yearSelected +
                '-' +
                params.name.split('月').join('') +
                '-' +
                '30',
            },
          })
          vm.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/cashDeposit/cashDepositListJC',
            newUrl: vm.$router.currentRoute.fullPath,
          })
        } else {
          vm.$router.push({
            path: '/home/cashDeposit/cashDepositListJC',
            query: {
              operationStartTime:
                vm.yearSelected +
                '-' +
                `0${params.name.split('月').join('')}` +
                '-' +
                '01',
              operationEndTime:
                vm.yearSelected +
                '-' +
                `0${params.name.split('月').join('')}` +
                '-' +
                '30',
            },
          })
          vm.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/cashDeposit/cashDepositListJC',
            newUrl: vm.$router.currentRoute.fullPath,
          })
        }
      })
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/homepagedeposit',
        data: {
          year: vm.yearSelected,
        },
      })
        .then((res) => {
          sexChart.hideLoading()
          vm.homepagedepositDate = res.data.result
          drawLineArea('bigScreenHomemarginData', 1, vm.homepagedepositDate)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取保证金数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:诚信管理
     */
    getFindprograde() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('bigScreenHomeintegrityManagement')
      )
      sexChart.on('click', function (params) {
        vm.$router.push({
          path: '/home/projectScore/projectEvaluationList',
          name: 'projectEvaluationList',
          query: {
            gradeLevel: params.name.split('级').join(''),
          },
        })
        vm.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/projectScore/projectEvaluationList',
          newUrl: vm.$router.currentRoute.fullPath,
        })
      })
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-ps/creditProjectScore/expand/findProjectGrade',
        data: {},
      })
        .then((res) => {
          let arrlevel = []
          let arrtotal = []
          res.data.result.projectGradeList.forEach(function (item) {
            arrlevel.push(item.level + '级')
            arrtotal.push(item.total)
          })
          // vm.findprogradeDate = res.data.result;
          sexChart.hideLoading()
          drawIntegrityManagement(
            'bigScreenHomeintegrityManagement',
            arrlevel,
            arrtotal
          )
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取诚信管理数据失败",
          //   type: "error",
          // });
        })
    },
  },
}
</script>

<style scoped lang="less">
.content {
  width: 100%;
  height: calc(100% - 46px);
  background: #1e4260;
  .screen {
    height: 100%;
    padding: 10px;
    .elcol {
      height: 100%;
      .drawbg {
        height: 100%;
        background: rgba(29, 65, 96, 0.5);
        position: relative;
        .title {
          height: 22px;
          position: absolute;
          top: 10px;
          left: 10px;
          font-size: 16px;
          line-height: 22px;
          color: #ffffff;
          letter-spacing: 0;
          font-weight: bold;
          &::before {
            content: '';
            background: #fed857;
            display: inline-block;
            width: 5px;
            height: 16px;
            margin-right: 10px;
            position: relative;
            top: 2px;
          }
          .desc {
            font-size: 14px;
            color: #7a8b9b;
          }
        }
        .info {
          width: 100%;
          font-size: 14px;
          color: #7193b2;
          text-align: center;
          position: absolute;
          top: 50px;
          left: 0;
          .dataNum {
            font-size: 20px;
            font-weight: bold;
            color: #53ffac;
            margin-bottom: 5px;
          }
        }
        .chartbg {
          height: 100%;
          overflow: hidden;
          .drawSelf {
            margin-top: 40px;
            height: calc(100% - 40px);
            padding: 10px;
            .drawSelfLi {
              height: calc(100% / 5);
              padding: 10px 0;
              border-top: 1px solid #1c405b;
              position: relative;
              &:last-child {
                border-bottom: 1px solid #1c405b;
              }
              .inlineB {
                height: 100%;
              }
              .imageBox {
                width: 34px;
                height: 36px;
                img {
                  width: 34px;
                  height: 36px;
                  position: absolute;
                  right: 5px;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                }
              }
              .progress {
                width: calc(100% - 50px);
                height: 100%;
                line-height: 100%;
                .autoProgress {
                  // float: left;
                  vertical-align: top;
                  display: inline-block;
                  margin-top: 22px;

                  width: 100%;
                  height: 10px;
                  background-image: linear-gradient(
                    270deg,
                    #fed857 2%,
                    rgba(83, 255, 172, 0) 100%
                  );
                  border-radius: 5px;
                  border-radius: 5px;
                }
                .titleInfo {
                  // float: left;
                  display: inline-block;
                  margin-top: 10px;
                  p {
                    height: 50%;
                    text-align: center;
                  }
                  .name {
                    font-size: 12px;
                    color: #ffffff;
                  }
                  .value {
                    font-size: 14px;
                    color: #fed857;
                  }
                }
              }
            }
          }
        }
      }
      .left {
        width: 100%;
        height: calc((100% - 10px) / 2);
        background-color: #284a68;
      }
      .right {
        width: 100%;
        height: 100%;
        background-color: #284a68;
      }
      .middleTop {
        padding: 20px 0 0 10px;
        height: calc(65% - 5px);
        margin-bottom: 10px;
        background-color: #284a68;
        #realNameStatistics {
          padding: 20px 10px;
        }
      }
      .middleBottom {
        height: calc(35% - 5px);
        background-color: #284a68;
        .titleTip {
          font-size: 12px;
          margin-left: 20px;
          color: #6defff;
        }
        .chartListRightBottom {
          position: relative;
          display: inline-block;
          background-color: rgba(29, 65, 96, 0.5);
          width: calc(50% - 5px);
          height: 100%;
        }
        .realNameBox {
          z-index: 2005;
          margin-top: 9px;
          /deep/.searchInputWidth .el-input__inner,
          .el-date-editor.el-input,
          .el-date-editor.el-input__inner,
          .searchInputWidth .el-input--suffix .el-input__inner {
            width: 110px;
            height: 30px;
            line-height: 20px;
            z-index: 10;
            position: absolute;
            right: 5px;
            top: 5px;
            background-color: #1d4160;
          }
          /deep/.el-input__icon {
            line-height: 37px;
          }
          /deep/.el-input__inner {
            height: 30px;
            background-color: #1d4160;
            color: #fff;
            border: 0px;
          }
          /deep/.el-picker-panel__body {
            background-color: #1d4160 !important;
          }
        }
        #bigScreenHomemarginData {
          padding: 50px 0px 0px 10px;
        }
      }
    }
  }
}
.pro-info {
  li {
    list-style-type: disc;
    color: #e3d109;
    cursor: pointer;
    p {
      font-size: 12px;
      color: #c6e6e6;
    }
    h4 {
      color: #00b7ee;
      font-size: 20px;
    }
  }
}
.areaBox {
  z-index: 2005;
  margin-right: 5px;
  margin-top: -8px;
  color: #fff;
  /deep/ .el-select {
    height: 28px;
    line-height: 28px;
    color: #fff;
    .el-input {
      height: 28px;
      line-height: 28px;
      .el-input__inner {
        background-color: #1d4160;
        color: #fff;
        border-color: transparent;
        font-size: 14px;
        height: 28px;
        line-height: 28px;
        width: 172px;
      }
    }
  }
  /deep/.el-input__suffix {
    top: 0 !important;
    height: 28px !important;
    line-height: 28px;
    .el-input__icon {
      height: 28px !important;
      line-height: 28px;
    }
  }
}
</style>
